

var newer = newer || {};
newer.gd = newer.gd || {};

newer.HtmlManager = function(o) {
	
	this.domNode = o.domNode;
	
	this.init();
};

newer.HtmlManager.prototype = {
	/*
	 * init contains the whole process from the beginning
	 */
	init: function() {
		this.domNode.html("");
		
		this.domNode.removeClass("nw-event-listener").addClass("nw-event-listener");
		this.domNode.off("nw-event").on("nw-event", $.proxy(this.nweHandler,this));
		
		this.domNode.html('<div id="tool-bar-area"><div id="tool-bar-div"></div></div><div id="html-wrapper-node"></div>');
		this.toolBarNode = new newer.ToolBarDiv({domNode:$("#tool-bar-div")});
		this.wrapperNode = $("#html-wrapper-node");
		
		this.refresh();
	},
	
	/*
	 * refresh
	 */
	refresh: function() {
		// create basic frame
		this.createFrame();

		// create divs
		this.divs = new Object();
		this.createDivs();

		// refresh all divs
		// this.refreshDivs();
	},
	
	/*
	 * nw-event handler
	 */
	nweHandler: function(e,c) {
		if(c.type == newer.EventHelper.PAGE_TYPE) {
			if (c.fromStatus.ptype != c.toStatus.ptype) {
				this.refresh();
			}
		}
	},
	
	/*
	 * generate frame based on pageType
	 * - options.pageType: required. valid value: "h"=homepage, "c"=circle, "u"=people
	 */
	generateFrame: function() {
		return this.generateWrapperFrame();
	},
	
	generateWrapperFrame: function() {
		var frame = '';
		switch(newer.gd.pstatus.ptype) {
			case newer.UriHelper.HOME_TYPE:
				frame += '<div id="wrapper"><div id="homepage-div"><table border="0" cellspacing="0" cellpadding="0"><tr id="content-area-row"><td id="navi-content-area"><div id="identity-div"></div><div id="home-navi-div"></div></td><td id="display-content-area"><div id="home-content-div"></div></td></tr></table></div></div>';
				break;
			case newer.UriHelper.CIRCLE_TYPE:
			case newer.UriHelper.PEOPLE_TYPE:
				frame += '<div id="wrapper"><div id="browse-div"><table border="0" cellspacing="0" cellpadding="0"><tr id="content-area-div-row"><td id="main-content-area"><div id="title-overview-div"></div><div id="navi-div"></div><div id="content-div"></div></td><td id="off-content-area" width="180px"><div id="overview-div"></div><div id="content2-div"></div></td></tr></table></div></div>';
				break;
			default:
				frame = "aaa";
		}
		return frame;
	},
	/*
	 * create frame page body
	 * argument:
	 * - options.wrapperId: the id of wrapper
	 * - options.frame: the basic frame the need this function to contruct. The 
	 *					frame should contain positioning div and anchor div. 
	 *					Achor divs should provided by caller of htmlManager too
	 */
	createFrame: function() {
		this.wrapperNode.html("");
		this.addWrapperFrame();
		return this;
	},
	
	addWrapperFrame: function() {
		this.wrapperNode.append(this.generateWrapperFrame());
		return this;
	},
	
	/*
	 * clearWrapper
	 */
	removeWrapperFrame: function() {
		$("#wrapper").remove();
		return this;
	},
	
	/*
	 * refresh all divs in html
	 */
	refreshDivs: function() {
		$.each(this.divs, function(key, val) {
			val.refresh();
		});
	},
	/*
	 * create divs according to this.s.pageType
	 */
	createDivs: function() {
		switch(newer.gd.pstatus.ptype) {
			case newer.UriHelper.HOME_TYPE:
				this.divs.idd = new newer.IdentityDiv({domNode:$("#identity-div")});
				this.divs.apd = new newer.AppDiv({domNode:$("#home-content-div"),naviNode:$("#home-navi-div")});
				break;
			case newer.UriHelper.CIRCLE_TYPE:
				this.divs.ttd = new newer.TitleDiv({domNode:$("#title-overview-div")});
				this.divs.ovd = new newer.OverviewDiv({domNode:$("#overview-div")});
				this.divs.nvd = new newer.NaviDiv({domNode:$("#navi-div")});
				this.divs.ctd = new newer.ContentDiv({domNode:$("#content-div")});	
				break;
			case newer.UriHelper.PEOPLE_TYPE:
				this.divs.ttd = new newer.TitleDiv({domNode:$("#title-overview-div")});
				this.divs.ovd = new newer.OverviewDiv({domNode:$("#overview-div")});
				this.divs.nvd = new newer.NaviDiv({domNode:$("#navi-div")});
				this.divs.ctd = new newer.ContentDiv({domNode:$("#content-div")});	
				break;
			default:
		}
	}
};